<template>
    <div class="main-container">
        <Scrollbar>
            <a-space direction="vertical">
                <div style="height:100%;overflow:auto;width: 100% !important;padding: 0 10px;">
                    <!-- <a-tabs   default-active-key="1"> -->
                    <!-- <a-tab-pane key="1" title="公司类别"> -->
                    <div style="width: 40%;height:100%;display: inline-block;min-width: 380px;vertical-align: top;margin-right: 10px;">
                        <a-card :style="{ minWidth: '360px' }" title="公司" hoverable>
                            <a-tree style="width:100%" block-node :data="data" :default-expand-all="true"
                                @select="selectTree" v-model="selectVal" @expand="expandNode1" ref="expandNode">

                            </a-tree>
                        </a-card>


                    </div>
                    <div style="width: 40%;height:100%;display: inline-block;min-width: 380px;">
                        <a-card :style="{ minWidth: '360px' }" title="部门" hoverable>
                        <a-tree style="width:100%" block-node :data="data2" :default-expand-all="true" @select="selectTree1"
                            v-model="selectVal" @expand="expandNode3" ref="expandNode2">
                        </a-tree>
                    </a-card>
                    </div>
                    <!-- </a-tab-pane> -->

                    <!-- </a-tabs> -->


                </div>
            </a-space>
        </Scrollbar>
    </div>
</template>
<script lang="ts">
import { get, post, put, del } from '@/api/http';
import { baseURL } from '@/api/axios.config.js'
import axios from 'axios';
import { Message, Modal } from '@arco-design/web-vue';

import { onMounted, ref, reactive, toRefs } from 'vue'
import { FormInstance } from '@arco-design/web-vue/es/form';
import { log } from 'console';
import { color } from 'echarts/core';

interface MenuItem {
    id: number,
    title: string,
    children: MenuItem[]
}
export default {
    name: 'OrganizationalStructure',
    setup() {
        const data = ref<MenuItem[]>([])
        let data2 = ref([])

        onMounted(() => {
            doRefresh()
        })
        const pageData = reactive({
            selectVal: "",
            frimList: [],
            bmList: [],
            zuList: [],
            firmTypeId: "",
            firmName: "",
            department: "",
            gsTitle: '',
            bmTitle: '',
            zuTitle: '',
            isClick: false,
            flag: false,
            selectList: []
        })

        const doRefresh = () => {
            post({
                url: 'org/baCompany/getTreeCompanyOrDepartment', data: {

                }
            })
                .then((result) => {
                    if (result.code === 200) {
                        data.value = suitableFields(result.data)
                    }

                })
        }
        //递归将字段改成树的渲染
        function suitableFields(temp: any) {
            temp.forEach(function (o: any) {
                o['title'] = o.label
                o['key'] = o.value
                o['name'] = o.name
                o['type'] = o.type
                o['title'] = o.label
                if (o.children != undefined && o.children.length != 0) {
                    suitableFields(o['children'])
                }
            })
            return temp
        }

        //第一个树
        const expandNode = ref()
        //第二个树
        const expandNode2 = ref()
        //获取选中的此数据
        const selectTree = (selectedKeys: any, data: any) => {
            let openList = expandNode.value.getExpandedNodes()

            let isOpen = false;
            openList.forEach(function (o: any) {
                if (o["key"] == selectedKeys[0]) {
                    isOpen = true;
                }
            })
            if (isOpen) {
                expandNode.value.expandNode(selectedKeys[0], false)
            } else {
                expandNode.value.expandNode(selectedKeys[0], true)
            }
            //判断是否是最后一级 是则展开公司
            // if (data.node.children.length == 0) {
            //     pageData.flag = true
            //     getAllFrim()
            //     pageData.frimList.forEach(function (o: any) {
            //         o['isClick'] = false
            //     })
            //     pageData.bmList = []
            //     pageData.zuList = []
            // } else {
            //     pageData.flag = false
            // }

        }
        //拿到展开的数据
        const expandNode1 = (key: any, expanded: any) => {
            // console.log(key); 上级id数组
            // console.log(expanded['node']['value']); //拿到展开的数据 以及他所有上级数据
            getBmsData(expanded['node']['value'])

        }
        const expandNode3 = (key: any, expanded: any) => {
            // console.log(key);
            // console.log(expanded);
        }
        //根据公司id 得到所有部门层级
        function getBmsData(val: any) {
            post({
                url: 'org/baCompany/getDepartmentTree?companyId=' + val,
            })
                .then((result) => {
                    if (result.code === 200) {
                        data2.value = suitableFields(result.data)
                    }

                })
        }
        //获取选中的此数据
        const selectTree1 = (selectedKeys: any, data: any) => {
            let openList = expandNode2.value.getExpandedNodes()

            let isOpen = false;
            openList.forEach(function (o: any) {
                if (o["key"] == selectedKeys[0]) {
                    isOpen = true;
                }
            })
            if (isOpen) {
                expandNode2.value.expandNode(selectedKeys[0], false)
            } else {
                expandNode2.value.expandNode(selectedKeys[0], true)
            }
        }

        return {
            selectTree1,
            expandNode3,
            expandNode2,
            close,
            data,
            data2,
            ...toRefs(pageData),
            selectTree,
            expandNode,
            expandNode1,
        }
    }
}
</script>
<style scoped>
.main-container {
    width: 100%;
    background-color: white;
    height: 100%;
}

.arco-card-body {
    padding: 0;
}

.arco-space {
    width: 100% !important;
}

.active {
    color: red;
}
</style>